<template>
	<el-card class="left-side-container">
		<template #header>
			<div class="side-header">
				<img style="width:28px;height:28px;border-radius:3px" src="https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/gold.981a5510.svg" alt="" />
				<div class="header-right">
					<span class="active">推荐</span>
					<el-divider direction="vertical"></el-divider>
					<span>最新</span>
				</div>
			</div>
		</template>
		<div class="left-list">
			<div class="list-item" v-for="(item,index) in list" :key="index">
				<div class="item-title">
					<span>{{item.title}}</span>
				</div>
				<div class="item-footer">
					<div class="footer-left">
						<span>{{item.lan}}&nbsp;</span>
						<span>{{item.type}}&nbsp;</span>
						<span>{{item.time}}&nbsp;</span>
					</div>
					<div class="footer-right">
						<span>赞&nbsp;{{item.like}}&nbsp;</span>
						<span>评论&nbsp;{{item.comment}}</span>
					</div>
				</div>
			</div>
		</div>
	</el-card>
</template>
<script lang="ts">
import { defineComponent, reactive,toRefs } from 'vue'

export default defineComponent({
  setup() {
    const state=reactive({
      list:[
        {
          like: 83,
          comment: 20,
          type: '面试',
          time: '一天前',
          lan: 'JavaScript',
          title: 'async/await你会用,但是你知道怎么处理错误吗?'
        },
        {
          like: 83,
          comment: 20,
          type: '面试',
          time: '一天前',
          lan: 'JavaScript',
          title: 'async/await你会用,但是你知道怎么处理错误吗?'
        },
        {
          like: 83,
          comment: 20,
          type: '面试',
          time: '一天前',
          lan: 'JavaScript',
          title: '为什么大厂前端监控都在用GIF做埋点?'
        },
        {
          like: 83,
          comment: 20,
          type: '面试',
          time: '一天前',
          lan: 'JavaScript',
          title: 'async/await你会用,但是你知道怎么处理错误吗?'
        },
        {
          like: 83,
          comment: 20,
          type: '面试',
          time: '一天前',
          lan: 'JavaScript',
          title: '为什么大厂前端监控都在用GIF做埋点?'
        },
        {
          like: 83,
          comment: 20,
          type: '面试',
          time: '一天前',
          lan: 'JavaScript',
          title: '为什么大厂前端监控都在用GIF做埋点?'
        },
        {
          like: 83,
          comment: 20,
          type: '面试',
          time: '一天前',
          lan: 'JavaScript',
          title: '为什么大厂前端监控都在用GIF做埋点?'
        },
        {
          like: 83,
          comment: 20,
          type: '面试',
          time: '一天前',
          lan: 'JavaScript',
          title: '为什么大厂前端监控都在用GIF做埋点?'
        },
        {
          like: 83,
          comment: 20,
          type: '面试',
          time: '一天前',
          lan: 'JavaScript',
          title: '为什么大厂前端监控都在用GIF做埋点?'
        },
        {
          like: 83,
          comment: 20,
          type: '面试',
          time: '一天前',
          lan: 'JavaScript',
          title: '为什么大厂前端监控都在用GIF做埋点?'
        },
        {
          like: 83,
          comment: 20,
          type: '面试',
          time: '一天前',
          lan: 'JavaScript',
          title: '为什么大厂前端监控都在用GIF做埋点?'
        },
        {
          like: 83,
          comment: 20,
          type: '面试',
          time: '一天前',
          lan: 'JavaScript',
          title: '为什么大厂前端监控都在用GIF做埋点?'
        },
        {
          like: 83,
          comment: 20,
          type: '面试',
          time: '一天前',
          lan: 'JavaScript',
          title: '为什么大厂前端监控都在用GIF做埋点?'
        },
        {
          like: 83,
          comment: 20,
          type: '面试',
          time: '一天前',
          lan: 'JavaScript',
          title: '为什么大厂前端监控都在用GIF做埋点?'
        },
        {
          like: 83,
          comment: 20,
          type: '面试',
          time: '一天前',
          lan: 'JavaScript',
          title: '为什么大厂前端监控都在用GIF做埋点?'
        }
      ]
    })
    return {
      ...toRefs(state)
    }
  },
})
</script>

<style lang="scss" scoped>
.left-side-container {
	width: 100%;
	height: 100%;
	background: #fff;
	box-sizing: border-box;
	.side-header {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.left-list {
		width: 100%;
		overflow: hidden;
		min-height: 500px;
		display: flex;
		flex-direction: column;
		.list-item {
			width: 100%;
			min-height: 65px;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding: 10px;
      .item-title{
        font-size: 18px;
      }
			.item-footer {
        margin-top: 15px;
				width: 100%;
        height: 30%;
        font-size: 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        color: #86909c;
        padding-bottom: 10px;
			}
		}
    .list-item:hover{
      background-color: #e8f3ff;
    }
	}
}
.active {
	color: #1e80ff;
}
</style>
<style>
.el-card__body {
    padding: 0;
}
</style>
